<style lang="sass" scoped>
	#app {
		width: 100%;
		height: 100%;
	}
	.el-breadcrumb{
		padding: 20px;
	}
	.el-header{
		background-color: #B3C0D1;
		color: #333;
	}
	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		line-height: 200px;
	}
	.el-main {
		background-color: #E9EEF3;
		color: #333;
		height: 100%;
	}
	body>.el-container {
		margin-bottom: 40px;
		width: 100%;
	}
	.header{
		text-align:right;
		.logout{
			margin-top:10px;
			display:inline-block;
			cursor:pointer;
		}
	}
</style>
<template>
	<div id="app">
		<el-container 
			v-if="type==='page'"
			style="height:100%;">
			<el-aside width="260px">
				<side></side>
			</el-aside>
			<el-container>
				<el-header>
					<div class="header">
						<div
							@click="logout()" 
							class="logout">退出登录</div>
					</div>
				</el-header>
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>
						<a >{{menu}}</a>
					</el-breadcrumb-item>
					<el-breadcrumb-item>
						<a >{{title}}</a>
					</el-breadcrumb-item>
				</el-breadcrumb>
				<el-main>
					<!-- 路由匹配到的组件将渲染在这里 -->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
		<router-view v-if="type==='login'"></router-view>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import side from 'components/side'
	export default {
		components: {
			side,
		},
		name: 'App',
		data(){
			return{
				// menu:'',
				// title:'',
				type:'',//page / login
			}
		},
		computed: {
			...mapState('index',{
				menu:state=>state.nav.menu,
				title:state=>state.nav.title
			}),
		},
		watch:{
			'$route'(to){
				// this.menu = to.meta.menu;
				// this.title = to.meta.title;
				this.NAV_EDIT({
					menu:to.meta.menu,
					title:to.meta.title
				})
				this.check();
			}
		},
		mounted(){
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.NAV_EDIT({
						menu:this.$route.meta.menu,
						title:this.$route.meta.title
					})
					// this.menu = this.$route.meta.menu;
					// this.title = this.$route.meta.title;
					this.check();
				},100)
			})
		},
		methods:{
			check(){
				if(this.$route.meta.title === '登陆'){
					this.type = 'login'
				}else{
					this.type = 'page'
				}
			},
			logout(){
				util.clearCookie(JSON.parse(util.getCookie('userMsg')).cookieName);
				location.href = config.loginUrl;
			},
			...mapMutations("index", ["NAV_EDIT"]),
		}
	}
</script>